import React, { Component } from 'react'
import { Form, Input, Button, Toast } from 'antd-mobile'
import { reg } from '../apis/reg.js'
import '../styles/reg.scss'
import { withRouter } from 'react-router-dom'
class Reg extends Component {
  formRef = React.createRef()

  onSubmit = async () => {
    let { username, password } = this.formRef.current.getFieldsValue()
    let res = await reg(username, password)
    switch (res.code) {
      case 400:
        Toast.show({
          content: '该账号已注册',
          position: 'top',
          // duration:10000000,
          // maskStyle:React.CSSProperties = {
          //   backgroundColor: 'red'}
          // maskStyle:{"--background-color":"red"}
        })
        break;
      case 200:
        Toast.show({
          content: '注册成功',
          position: 'top',
          // duration:10000000,
          // maskStyle:{'--backgroundColor': 'red' }
        })
        this.props.history.push('/login')
        break;

      default:
        break;
    }
    console.log(res);
  }
  render() {
    return (
      <Form layout='vertical' ref={this.formRef} className='reg'>
        <p>注册</p>
        <Form.Item label='用户名' name='username'>
          <Input placeholder='请输入用户名' clearable />
        </Form.Item>
        <Form.Item label='密码' name='password'>
          <Input placeholder='请输入密码' clearable autocomplete />
        </Form.Item>
        <Button block color='primary' onClick={this.onSubmit} size='large'>
          提交
        </Button>
      </Form>
    )
  }
}
export default withRouter(Reg)